<template>
	<view class="page-container">
		<view v-if="cateList.length" style="padding-bottom: 168rpx;">
			<view v-for="(item, index) in cateList" :key="index" class="back-white cate-grid" @tap="selectCate(item)">
				<text>{{ index+1 }}</text>
				<text>{{ item.name }}</text>
				<u-icon class="pall-base" name="edit-pen-fill" :color="primaryColor" :size="36"
					label='编辑' label-size="26" label-pos="right" :label-color="primaryColor" margin-left="4" @tap.stop="goCateEdit(item)">
				</u-icon>
				<u-icon v-if="type==0" class="pall-base" name="trash-fill" :color="redColor" :size="36"
					label='删除' label-size="26" label-pos="right" :label-color="redColor" margin-left="4" @tap.stop="removeCate(index)">
				</u-icon>
			</view>
		</view>
		<view v-else class="col-box center pcol-lg">
			<image src="/static/icon/nodata.png" style="width: 400rpx;height: 400rpx;"></image>
			<text class="s24 grey-light">还没有添加分类~</text>
		</view>
		
		<!-- 悬浮按钮-添加分类 -->
		<view class="radius-circle back-white add-button" @click="goCateEdit()">
			<image class="icon" src="../static/新增.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateList: [], // 分类列表
				type: 0, // 从店铺管理进入默认0 选择分类1
			};
		},
		onLoad(options) {
			if (options.type) this.type = options.type
		},
		onShow() {
			// 获取商品分类
			this.getGoodsTypeList()
		},
		methods: {
			// 选择分类
			selectCate(item) {
				if (this.type==0) return
				const pages = getCurrentPages()
				let prePage = pages[pages.length-2]
				prePage.$vm.cateId = item.id
				prePage.$vm.cateName = item.name
				uni.navigateBack()
			},
			
			// 跳转添加、编辑分类
			goCateEdit(item=null) {
				uni.navigateTo({
					url: `/pages/subPackage/merchant/cate_edit/cate_edit?params=${JSON.stringify(item)}`
				})
			},
			
			// 删除分类
			removeCate(index) {
				let id = this.cateList[index].id
				uni.showModal({
					title: '确定删除该分类？',
					content: '注意：该分类下的所有商品会一并删除！',
					confirmText: '确定',
					confirmColor: this.redColor,
					success: (res) => {
						if (res.confirm) {
							this.$api.DelGoodsType({
								id: id
							}).then(res => {
								console.log('DelGoodsType-success', res)
								if (res.data.code == 200) {
									this.cateList.splice(index, 1)
									uni.showToast({
										icon: 'none',
										title: '删除成功！'
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data.msg
									})
								}
							}).catch(err => {
								console.log('DelGoodsType-fail', err)
								uni.showToast({
									icon: 'none',
									title: '删除失败！'
								})
							})
						}
					}
				})
			},
			
			// 获取商品分类
			getGoodsTypeList() {
				this.$api.GetGoodsTypeList({
					"current": 1,
					"limit": 100
				}).then(res => {
					console.log('GetGoodsTypeList-success', res)
					if (res.data.code === 200) {
						this.cateList = res.data.data.records
					}
				}).catch(err => {
					console.log('GetGoodsTypeList-fail', err)
				})
			},
		},
	}
</script>

<style lang="scss">
	// 分类项
	.cate-grid {
		height: 94rpx;
		padding: 0 60rpx;
		display: grid;
		grid-template-columns: 112rpx 1fr 132rpx 132rpx;
		align-items: center;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	// 新增分类按钮
	.add-button {
		position: fixed;
		right: 32rpx;
		bottom: 48rpx;
		z-index: 99;
		.icon {
			display: block;
			width: 73rpx;
			height: 72rpx;
		}
	}
</style>
